<template>
  <div class="grid">
    <van-swipe indicator-color="#00a8ff">
      <van-swipe-item>
        <van-row>
          <van-col span="6" class="row_item" v-for="(row_item, index) in row" :key="index">
            <div>
              <img :src="row_item.icon" class="icon" @click="con">
              <span class="title">{{row_item.title}}</span>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
      <van-swipe-item>
        <van-row>
          <van-col span="6" class="row_item" v-for="(row_item, index) in row" :key="index">
            <a>
              <img :src="row_item.icon" class="icon">
              <span class="title">{{row_item.title}}</span>
            </a>
          </van-col>
        </van-row>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: [
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon1.png",
          title: "拼购"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon10.png",
          title: "积分商城"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon2.png",
          title: "内容"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon3.png",
          title: "内容"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon4.png",
          title: "内容"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon1.png",
          title: "拼购"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon10.png",
          title: "积分商城"
        },
        {
          icon: "http://www.nrbnrd.com/static/mobile/img_s/i_c_icon2.png",
          title: "内容"
        }
      ]
    };
  },
  methods: {
    con(){
      console.log("111")
    }
  }
};
</script>

<style>
.grid .row_item .icon {
  display: block;
  width: 45px;
  margin: 5px auto;
  /* margin-left: px; */
}
.row_item .title {
  display: block;
  color: #555;
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
  margin-top:5px; 
}
.grid .van-swipe__indicators{
    bottom: 0px; 
}
.grid .van-swipe__indicator{
    background: gray;
}
</style>